<template>
  <div id="divbigbox">
    <div id="divbox1">
      <p>2023年4月份利润销售额</p>
      <div class="echartsBox" ref="chart"></div>
    </div>
    <!-- <div id="divbox2">
      <my-map></my-map>
    </div> -->
  </div>
  <div id="divbox3" style="margin-top: 100px">
    <div class="echartsBox2" ref="chart2"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
// import MyMap from "./components/MyMap";
export default {
  name: "DashBoard",
  data() {
    return {
      myChart: null,
    };
  },
  // components: {
  //   MyMap,
  // },
  methods: {
    //折线图or柱状图
    initChart() {
      const myChart = echarts.init(this.$refs.chart);
      const option = {
        title: {
          // text: "{a|这是a标签}",
          // text: "",
          textStyle: {
            color: "red",
            /*  rich: {
              a: {
                width: 20,
                height: 20,
                color: "blue",
                backgroundColor: {
                  image:
                    "http://www.cgtpw.com/d/file/xgmn/2021-07-04/1a395496029fada3da99790e6354ffd4.jpg",
                },
              },
            }, */
          },
        },
        tooltip: {},
        legend: {
          // data: ["销量"],//只显示销量一个图例
          // itemGap: 300,//控制图例之间的距离
          //formatter: "xilie{name}", //自定义标题图例的名称
          //inactiveColor: "red",//控制关闭图例之后图例的颜色
          data: [
            {
              name: "销量",
              // icon: "triangle",
            },
            {
              name: "利润",
            },
          ],
        },
        xAxis: {
          data: [
            "衬衫",
            "羊毛衫",
            "雪纺衫",
            "裤子",
            "高跟鞋",
            "袜子",
            "夹克",
            "大袄子",
          ],
          axisLabel: {
            rotate: 45,
            margin: 20, //类目名称与x轴的距离
          },
        },
        yAxis: {
          splitNumber: 10,
          // minInterval:
          min: 0,
          max: 60,
          interval: 10,
        },
        dataZoom: [
          {
            type: "inside",
          },
          {
            type: "slider",
          },
        ],
        visualMap: [
          /*  {
            type: "piecewise",
            splitNumber: 5,
            min: 0,
            max: 36,
          }, */
          /*  {
            type: "continuous",
            splitNumber: 5,
            min: 0,
            max: 36,
            // range: [4, 15],
            calculable: true,
          }, */
        ],
        toolbox: {
          feature: {
            saveAsImage: {},
            restore: {},
            // dataView: {},
            // dataZoom: {},
            magicType: {
              type: ["line", "bar", "stack"],
            },
          },
        },
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20, 60, 50],
          },
          {
            name: "利润",
            type: "line",
            data: [6, 22, 34, 61, 8, 20, 50, 60],
          },
        ],
        // backgroundColor: "red",设置背景颜色
      };
      myChart.setOption(option);
      this.myChart = myChart;
    },
    //扇形
    initChart2() {
      const myChart2 = echarts.init(this.$refs.chart2);
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}%",
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
        },
        color: ["#1689fe", "#cd9d9d", "#8c79fe", "#90c5ed", "#bfc078"], // 自定义颜色
        series: [
          {
            name: "访问来源",
            type: "pie",
            minAngle: 10, // 最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
            radius: ["30%", "70%"],
            center: ["48%", "58%"],
            label: {
              formatter: "{b|{b}}\n({c}%)\n", // 这里的设置就是饼图的标签内容及其格式
              rich: {
                b: {
                  align: "center",
                },
              },
            },
            data: [
              { value: 10, name: "直接访问" },
              { value: 30, name: "邮件营销" },
              { value: 20, name: "联盟广告" },
              { value: 10, name: "视频广告" },
              { value: 30, name: "搜索引擎" },
            ],
          },
        ],
      };
      myChart2.setOption(option);
      this.myChart2 = myChart2;
    },
  },
  mounted() {
    this.initChart();
    this.initChart2();
  },
};
</script>

<style lang="scss" scoped>
.echartsBox2 {
  height: 400px;
  max-width: 400px;
}

#divbigbox {
  display: flex;
  justify-content: space-around;
  #divbox1 {
    height: 300px;
    width: 40%;
    margin-top: 50px;
    border: 1px double rgb(47, 38, 38);
    padding: 40px;
    p {
      font-size: 24px;
      font-weight: 700;
      color: rgb(64, 79, 79);
      margin-bottom: 10px;
      text-align: center;
    }
    .echartsBox {
      height: 300px;
      max-width: 500px;
    }
  }
  #divbox2 {
    height: 300px;
    width: 40%;
    margin-right: 20px;
  }
}
</style>